import React, { useCallback } from 'react'
import clsx from 'clsx'
import { makeStyles } from '@material-ui/core/styles'
import { TextField, Grid, Button, CircularProgress } from '@material-ui/core'
import { useForm } from 'react-hook-form';

const useStyles = makeStyles({
  root: {

  },
  itemInput: {
    width: '100%'
  }
})

interface IProps {
  onSubmit: (data: any) => void,
  loading: boolean
  resetRef: (reset: () => void) => void
}

const CommentForm: React.FC<IProps> = props => {
  const classes = useStyles()
  const { register, handleSubmit, errors, reset } = useForm(); // initialise the hook
  props.resetRef(reset)

  return <form
    className={classes.root}
    noValidate
    autoComplete="off"
    onSubmit={handleSubmit(props.onSubmit)}
  >
    <Grid
      container
      spacing={2}
    >
      <Grid
        item
        sm={4}
        xs={12}
      >
        <TextField
          fullWidth
          label="昵称"
          variant="outlined"
          required
          name="name"
          inputRef={register({
            required: '要告诉我你的名字,喵～',
            maxLength: {
              value: 10,
              message: '太长了喵'
            },
          })}
          error={Boolean(errors.name)}
          helperText={errors.name?.message}
        />
      </Grid>
      <Grid
        item
        sm={4}
        xs={12}
      >
        <TextField
          fullWidth
          label="邮箱"
          variant="outlined"
          required
          name="email"
          inputRef={register({
            required: '要告诉我你的邮箱,喵～',
            pattern: {
              value: /^\S+@\S+$/i,
              message: '这不是邮箱啊喵'
            }
          })}
          error={Boolean(errors.email)}
          helperText={errors.email?.message}
        />
      </Grid>
      <Grid
        item
        sm={4}
        xs={12}
      >
        <TextField
          fullWidth
          label="网站"
          variant="outlined"
          name="website"
          inputRef={register}
          error={Boolean(errors.website)}
          helperText={errors.website?.message}
        />
      </Grid>
      <Grid
        item
        xs={12}
      >
        <TextField
          fullWidth
          label="填写建议"
          variant="outlined"
          required
          multiline
          rows={4}
          name="content"
          inputRef={register({
            required: '说话啊喵！',
            minLength: {
              value: 5,
              message: '好短啊喵～'
            }
          })}
          error={Boolean(errors.content)}
          helperText={errors.content?.message}
        />
      </Grid>
      <Grid
        item
        xs={12}
      >
        <Button
          variant="contained"
          color="primary"
          disableElevation
          size='large'
          type="submit"
          disabled={props.loading}
          startIcon={
            props.loading ? (
              <CircularProgress
                color="inherit"
                size="1em"
              />
            ) : false
          }
        >

          加入讨论
        </Button>
      </Grid>
    </Grid>
  </form>
}

export default CommentForm
